Angular এর Interceptors

Web Development - অ্যাঙ্গুলার (Angular) - Angular এর HTTP ক্লায়েন্ট |
2
2

Interceptors হলো Angular HTTP ক্লায়েন্টের অংশ, যা HTTP রিকোয়েস্ট এবং রেসপন্স প্রক্রিয়াকে কাস্টমাইজ করতে ব্যবহৃত হয়। এটি মূলত HTTP রিকোয়েস্ট বা রেসপন্সের উপর বিভিন্ন ধরনের লজিক প্রয়োগ করতে সাহায্য করে, যেমন টোকেন ব্যবস্থাপনা, লগিং, রিকোয়েস্ট বা রেসপন্স মডিফিকেশন ইত্যাদি।

Interceptors হ'ল Angular-এর HttpClientModule এর একটি বিশেষ ফিচার যা HTTP রিকোয়েস্ট প্রেরণের আগে বা HTTP রেসপন্স আসার পরে কোনো নির্দিষ্ট লজিক বা অপারেশন সম্পাদন করতে সক্ষম।


Interceptor কী?

Interceptor হলো একটি ক্লাস যা HTTP রিকোয়েস্ট বা রেসপন্সের সাথে মধ্যবর্তী পদক্ষেপ হিসেবে কাজ করে। এটি HttpInterceptor ইন্টারফেস বাস্তবায়ন করে এবং intercept মেথডের মাধ্যমে রিকোয়েস্ট এবং রেসপন্সে কাস্টমাইজেশন এবং ম্যানিপুলেশন করে। ইন্টারসেপ্টর ব্যবহারের মাধ্যমে আপনি যেমন অ্যাপ্লিকেশন লেভেলে একসাথে সমস্ত HTTP রিকোয়েস্টের জন্য টোকেন ইনজেক্ট করতে পারেন, তেমনি কোনো নির্দিষ্ট রিকোয়েস্টের রেসপন্স হ্যান্ডেল করার লজিকও প্রয়োগ করতে পারেন।


Interceptor তৈরি করা

Angular-এ ইন্টারসেপ্টর তৈরি করতে হলে HttpInterceptor ইন্টারফেসটি ইমপ্লিমেন্ট করতে হয় এবং তারপরে intercept() মেথডটি ব্যবহার করা হয়, যেখানে HTTP রিকোয়েস্টের উপর কাস্টম লজিক প্রয়োগ করা হয়।

উদাহরণ: টোকেন হেডার যোগ করা

ধরা যাক, আমাদের একটি ইন্টারসেপ্টর তৈরি করতে হবে যা HTTP রিকোয়েস্টের সাথে Authorization টোকেন যোগ করবে।

  1. প্রথমে, একটি নতুন ইন্টারসেপ্টর ক্লাস তৈরি করি:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = localStorage.getItem('auth_token');
    
    // Authorization হেডার যোগ করা
    const clonedRequest = req.clone({
      setHeaders: {
        Authorization: `Bearer ${authToken}`
      }
    });

    return next.handle(clonedRequest);
  }
}

এখানে:

  • intercept() মেথডটি HttpRequest এবং HttpHandler গ্রহণ করে।
  • req.clone() মেথডটি ব্যবহার করে রিকোয়েস্টটিকে কপি করা হয় এবং Authorization হেডার যুক্ত করা হয়।
  • এরপর, next.handle(clonedRequest) ব্যবহার করে কপি করা রিকোয়েস্টটি পরবর্তী স্টেপে প্রেরণ করা হয়।

Interceptor ব্যবহার করা

ইন্টারসেপ্টরটি ব্যবহারের জন্য Angular মডিউলে এটি প্রোভাইড করতে হবে। সাধারণত AppModule এ এটি প্রদান করা হয়।

  1. AppModule এ ইন্টারসেপ্টর প্রদান করা:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, HTTP_INTERCEPTORS প্রদান করে ইন্টারসেপ্টরটি অ্যাপ্লিকেশন লেভেলে কার্যকর করা হচ্ছে। multi: true প্যারামিটারটি ব্যবহৃত হয়েছে কারণ একাধিক ইন্টারসেপ্টর প্রয়োগ করা সম্ভব।


বিভিন্ন ধরণের Interceptor

Angular-এ বিভিন্ন ধরনের ইন্টারসেপ্টর তৈরি করা যেতে পারে। নিচে কয়েকটি উদাহরণ:

1. লগিং ইন্টারসেপ্টর

এই ইন্টারসেপ্টর HTTP রিকোয়েস্ট এবং রেসপন্স লগ করতে ব্যবহৃত হয়।

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('HTTP Request:', req);
    
    return next.handle(req).pipe(
      tap((event) => {
        console.log('HTTP Response:', event);
      })
    );
  }
}

2. Error Handling ইন্টারসেপ্টর

এই ইন্টারসেপ্টরটি HTTP রেসপন্সে কোনো ত্রুটি আসলে তা হ্যান্ডল করার জন্য ব্যবহৃত হয়।

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse, HttpEvent } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        console.error('HTTP Error:', error);
        return throwError(error);
      })
    );
  }
}

ইন্টারসেপ্টরের সুবিধা

  • রিকোয়েস্ট বা রেসপন্স ম্যানিপুলেশন: আপনি HTTP রিকোয়েস্ট এবং রেসপন্সে কাস্টম লজিক প্রয়োগ করতে পারেন, যেমন টোকেন সংযোজন বা লগিং।
  • এক্সপিরেশন হ্যান্ডলিং: ইন্টারসেপ্টরের মাধ্যমে আপনি সহজেই এক্সপিরেশন বা ত্রুটি হ্যান্ডলিং করতে পারেন।
  • অথেনটিকেশন এবং অথোরাইজেশন: টোকেন ইনজেকশন, অথেনটিকেশন এবং অথোরাইজেশন প্রসেসকে কেন্দ্রীভূত করা যায়।
  • ইরর ম্যানেজমেন্ট: রিকোয়েস্টের ইরর বা রেসপন্সের ইরর হ্যান্ডলিং সহজ করে দেয়।

Interceptors অত্যন্ত শক্তিশালী এবং কাস্টম HTTP রিকোয়েস্ট এবং রেসপন্স ম্যানিপুলেশন করতে Angular অ্যাপ্লিকেশনে ব্যাপকভাবে ব্যবহৃত হয়।

Content added By
Promotion